<template>
  <view class="content">
    <view class="input">
      <uni-search-bar
        v-model.trim="parameter.Article_Name"
        style="height: 24px; font-size: 14px"
        @clear="rake"
        @cancel="rake"
        @blur="rake"
      >
      </uni-search-bar>
    </view>

    <view class="nav">
      <view
        v-for="(item, index) in category"
        @click="SwitchVariety(item, index)"
        :key="index"
        :class="{ active: activeIndex === index }"
        style="cursor: pointer"
        >{{ item }}</view
      >
    </view>

    <view class="cont">
      <view
        class="item"
        v-for="(item, index) in tableData"
        :key="index"
        @click="
          handleTabs(
            '/pages/My/My_Order/Order_details?Group_Transaction_SerialNumber=' +
              item.Group_Transaction_SerialNumber +
              '&Enterprise_Info_SerialNumber=' +
              item.Enterprise_Info_SerialNumber,
            item
          )
        "
      >
        <view class="name">{{ item.Article_Name }}</view>
        <view class="title">
          <image :src="Domain_IMG + item.Picture_URL" mode="scaleToFill" />
          <view class="right">
            <view>
              <text v-if="item.Row_Status == '0' && item.Buyer_Status == '0'"
                >待对方审核</text
              >
              <text v-if="item.Row_Status == '1' && item.Buyer_Status == '0'"
                >待确认合同</text
              >
              <text v-if="item.Row_Status == '1' && item.Buyer_Status == '4'"
                >待对方确认合同</text
              >
              <text
                v-if="
                  item.Row_Status == '4' &&
                  item.Buyer_Status == '4' &&
                  item.Trading_Detail_SerialNumber.includes('T01000000000001_1')
                "
                >待对方发货</text
              >
              <text v-if="item.Row_Status == '5'">待收货</text>
              <text
                v-if="
                  item.Row_Status == '4' &&
                  item.Trading_Detail_SerialNumber.includes('T01000000000001_0')
                "
                >待我方付首款</text
              >
              <text
                v-if="
                  item.Row_Status == '6' &&
                  item.Trading_Detail_SerialNumber.includes(
                    'T01000000000002_0'
                  ) &&
                  item.Trading_Detail_SerialNumber.includes('T01000000000001_1')
                "
                >待我方付下一笔款</text
              >
              <text
                v-if="
                  item.Row_Status == '6' &&
                  item.Trading_Detail_SerialNumber.includes(
                    'T01000000000003_0'
                  ) &&
                  item.Trading_Detail_SerialNumber.includes('T01000000000002_1')
                "
                >待我方付下一笔款</text
              >
              <text
                v-if="
                  item.Row_Status == '6' &&
                  item.Trading_Detail_SerialNumber.includes(
                    'T01000000000004_0'
                  ) &&
                  item.Trading_Detail_SerialNumber.includes('T01000000000003_1')
                "
                >待我方付尾款</text
              >
              <text
                v-if="
                  item.Row_Status == '6' &&
                  item.Buyer_Status == '4' &&
                  Number(item.Amount) == Number(item.Collection_Amount)
                "
                >交易结束</text
              >
            </view>
            <view>×{{ item.Quantity }}{{ item.Unit }}</view>
            <view>{{ item.Trading_Name }}</view>
          </view>
        </view>
        <!-- <view class="diz">黑龙江集货邦数字供应链有限公司</view> -->
        <view class="con">
          <view
            ><text>应付金额</text>￥{{
              (Number(item.Amount) * Number(item.Quantity)).toFixed(2)
            }}</view
          >
          <view
            ><text>实付金额</text>￥{{
              Number(item.Collection_Amount).toFixed(2)
            }}</view
          >
          <view
            ><text>待付金额</text>￥{{
              (Number(item.Amount) - Number(item.Collection_Amount)).toFixed(2)
            }}</view
          >
        </view>
      </view>
    </view>

    <view class="text-center py-2">
      <text>{{ BottomFont }}</text>
      <uni-icons
        v-if="BottomFont == '加载中...'"
        type="spinner-cycle"
      ></uni-icons>
    </view>

    <view
      v-if="tag"
      @click="goTop"
      class="bg-white flex align-center justify-center"
      style="
        width: 120rpx;
        height: 120rpx;
        border-radius: 50%;
        box-shadow: 0 0 15rpx rgba(0, 0, 0, 0.5);
        position: fixed;
        bottom: 150rpx;
        right: 50rpx;
      "
    >
      <image
        style="width: 80%; height: 80%"
        src="https://digital.essc.top/dist/zjl_icon/gotop.png"
        mode=""
      ></image>
    </view>
  </view>
</template>

<script>
import { getGroupTransactionAllAction } from "@/api/purchasedgoods.js";
const app = getApp();
export default {
  data() {
    return {
      tag: false,
      Domain_IMG: app.globalData.Domain_IMG,
      tableData: [],
      total: 0,
      activeIndex: 0,
      category: [
        //用户专区分类筛选
        "全部",
        "待审核",
        "待付款",
        "待收货",
        "交易成功",
      ],
      parameter: {
        Type: "0",
        Article_Name: "",
        Row_Status: "",
        Group_Purchasing_SerialNumber: "",
        Enterprise_Info_SerialNumber: uni.getStorageSync("enterprise"),
        page: 1, //页数
        limit: 5, //每页数据条数
      },
      BottomFont: "下拉获取更多",
      num: 0,
    };
  },
  created() {
    this.purchasedGoods(this.parameter);
  },
  onLoad(options) {
    let index = Number(options.index);
    if (index == 0) {
      this.parameter.Row_Status = "";
      this.activeIndex = 0;
    } else if (index == 1) {
      this.parameter.Row_Status = "0";
      this.activeIndex = 1;
    } else if (index == 2) {
      this.parameter.Row_Status = "4";
      this.activeIndex = 2;
    } else if (index == 3) {
      this.parameter.Row_Status = "5";
      this.activeIndex = 3;
    } else if (index == 4) {
      this.parameter.Row_Status = "6";
      this.activeIndex = 4;
    }
    console.log(this.activeIndex);
    this.purchasedGoods(this.parameter);
  },
  onReachBottom() {
    this.tag = true;
    //触底事件
    if (this.num != this.total) {
      //如果未超过所有数则调用请求
      this.parameter.page++;
      this.purchasedGoods(this.parameter);
    } else {
      //反之改变底部字体
      this.BottomFont = "已经到底了";
    }
  },
  methods: {
    rake() {
      this.tableData = [];
      this.parameter.Article_Name = "";
      console.log(this.parameter);
      this.purchasedGoods(this.parameter);
    },

    async SwitchVariety(i, index) {
      console.log(index);
      if (index == 0) {
        this.parameter.Row_Status = "";
      } else if (index == 1) {
        this.parameter.Row_Status = "0";
      } else if (index == 2) {
        this.parameter.Row_Status = "4";
      } else if (index == 3) {
        this.parameter.Row_Status = "5";
      } else {
        this.parameter.Row_Status = "6";
      }
      this.goTop();
      this.num = 0;
      this.parameter.page = 1;
      this.purchasedGoods(this.parameter);
      this.tableData = [];
      this.activeIndex = index;
    },

    async purchasedGoods(data) {
      uni.showLoading({
        title: "加载中...",
      });
      this.BottomFont = "加载中...";
      const res = await getGroupTransactionAllAction({
        data,
      });
      if (
        (res.redirect && res.redirect == "REDIRECT") ||
        res.REDIRECT == "REDIRECT"
      ) {
        uni.navigateTo({
          url: "/pages/My/Login",
        });
      } else if (res.Status == "success") {
        this.tableData.push(...res.tableData);
        this.total = Number(res.limit);
        uni.hideLoading();
        this.num = this.tableData.length;
        if (this.num == this.total) {
          this.BottomFont = "没有更多了";
        } else {
          this.BottomFont = "已经到底了";
        }
      }
    },
    handleTabs(url, item) {
      console.log(item);
      uni.navigateTo({
        url,
      });
      // uni.
      uni.setStorageSync("detail", item);
    },
    goTop() {
      //返回顶部
      uni.pageScrollTo({
        scrollTop: 0,
      });
      this.tag = false;
    },
  },
};
</script>

<style lang="scss">
.content {
  background-color: #f5f5f5;
  // height: calc(100vh);
  width: 100%;
  .nav {
    height: 88rpx;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-around;
    // font-weight: bold;
    view {
      text-align: center;
      height: 100%;
      display: flex;
      align-items: center;
      font-size: 30rpx;
      padding: 10rpx;
      box-sizing: border-box;
    }
    .active {
      border-bottom: 3px solid #28a745;
      font-size: 30rpx;
    }
  }
  .cont {
    width: 100%;
    padding: 20rpx;
    box-sizing: border-box;
    .item {
      border-radius: 20rpx;
      background-color: #fff;
      padding: 20rpx;
      box-sizing: border-box;
      margin: 0 0 30rpx 0;
      .name {
        padding: 0 0 20rpx 0;
        border-bottom: 1px solid #f5f5f5;
      }
      .title {
        display: flex;
        justify-content: space-between;
        margin: 0 0 20rpx 0;
        image {
          width: 200rpx;
          height: 200rpx;
        }
        .right {
          width: 68%;
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;
          view {
            text-align: right;
          }
        }
      }
      .con {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding: 30rpx 0;
        font-size: 30rpx;
        view {
          margin: 0 20rpx 0 0;
        }
        text {
          font-size: 24rpx;
        }
        view:last-child {
          font-size: 40rpx;
          color: #28a745;
        }
      }
    }
  }
  .input {
    // height: 40rpx;
    border-radius: 20rpx;
    background-color: #fff;
    // padding: 20rpx;
    box-sizing: border-box;
    // margin: 0 0 30rpx 0;
  }
}
</style>